<!DOCTYPE html>
<html style="background-color: rgb(252, 252, 252);">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>covid-simulator</title>

        <script src="./lib/vue.min.js"></script>

        <link rel="stylesheet" href="./lib/bulma.css" />
    </head>
    <body>
        <div class="container wrap">
            <h1 class="title">COVID-19 Simulator</h1>
            <form action="./simulator/" method="get" id="getInfor">
                <script>
                    let temp = document.createElement('input');
                    temp.name = 'home_url';
                    temp.value = location.href;
                    temp.style.display = 'none';
                    document.querySelector('#getInfor').appendChild(temp);
                </script>
                <label for="people">初始人群数量: </label>
                <input
                    type="number"
                    name="people"
                    id="people"
                    class="input"
                    value="500"
                    required
                />

                <label for="unhealthy-people">初始感染者数量: </label>
                <input
                    type="number"
                    name="unhealthy_people"
                    id="unhealthy-people"
                    class="input"
                    value="120"
                    required
                />

                <label for="beds">病床数量(可为0): </label>
                <input
                    type="number"
                    name="beds"
                    id="beds"
                    class="input"
                    value="60"
                    required
                />

                <br /><br />

                <button type="submit" class="button is-primary is-large">
                    开始
                </button>
            </form>
            <div
                class="is-warning notification"
                style="margin-top: 10px; padding: 8px;"
            >
                <p>人数的数量可能会影响流畅度，请适度分配。</p>
            </div>
            <div
                class="is-warning notification"
                style="margin-top: 10px; padding: 8px;"
            >
                <p>如果发生错误，请确保：</p>
                <ul>
                    <li>初始人群数量 &gt; 初始感染者数量；</li>
                </ul>
            </div>
        </div>
    </body>
</html>
